<template>
	<view class="page-container">
		<view class="box">
			<view class="avatar-box">
				<image class="avatar" :src="userInfo.avatar"></image>
				<view class="name">{{userInfo.username && userInfo.username}}</view>
			</view>
			<view class="qrcode-box">
				<image class="qrcode" show-menu-by-longpress="{{true}}" :src="qrcode" ></image>
			</view>
			<view class="bottom">
				<button class="btn" hover-class="none" open-type="share">发给微信好友</button>
				<view class="line"></view>
				<view @tap="saveImage">保存到相册</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Auth from '@/shopro/permission/index.js'
	import app from '@/shopro/poster/QS-SharePoster/app.js'

	export default {
		data() {
			return {
				userInfo: {},
				qrcode: '',
				uid: ''
			};
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				this.$http('member.userInfo', {}, '加载中...').then(res => {
					if (res.code === 1) {
						this.userInfo = res.data
						this.uid = res.data.user_id
						this.qrcode = `${this.$API_URL}wechat/wxacode?scene=${res.data.user_id}`
					}
				})
			},
			download() {
				app.downloadFile_PromiseFc(this.qrcode).then(path => {
					uni.saveImageToPhotosAlbum({
						filePath: path,
						success: res => {
							this.$u.toast('保存成功');
						},
						fail: err => {
							console.log(`图片保存失败:`, err);
							this.$u.toast('保存失败');
						}
					});
				})
			},
			// 保存图片
			async saveImage() {
				let that = this;
				if (['wxOfficialAccount', 'H5'].includes(this.platform)) {
					this.$u.toast('长按图片保存');
					return false;
				}
				let authState = await new Auth('writePhotosAlbum').check();
				if (authState) {
					this.download()
				}
			},
		},
		onShareAppMessage(res) {
      let path =
          `/pages/index/index?userBindId=${this.uid}`
      return {
        path,
				title: '芳之源',
				imageUrl: this.qrcode,
			}
		}
	}
</script>

<style lang="scss" scoped>
.page-container {
	background: #010101;
	height: 100%;
	padding: 32upx;
	.box {
		position: relative;
		width: 686upx;
		height: 816upx;
		background: #FFFFFF;
		border-radius: 16upx;
		padding: 48upx 32upx;
		.avatar-box {
			display: flex;
			align-items: center;
			.avatar {
				width: 88upx;
				height: 88upx;
				border-radius: 50%;
			}
			.name {
				color: #333333;
				font-size: 36upx;
				margin-left: 32upx;
			}
		}
		.qrcode-box {
			margin: 120upx auto 0 auto;
			width: 352upx;
			// height: 352upx;
			background: #FFFFFF;
			border: 6upx solid #333333;
			text-align: center;
			padding: 18upx;
			.qrcode {
				width: 316upx;
				height: 316upx;
			}
		}
		.bottom {
			position: absolute;
			bottom: 48upx;
			left: 90upx;
			width: calc(100% - 190upx);
			display: flex;
			justify-content: space-between;
			font-size: 28upx;
			font-weight: 400;
			color: #010101;
			.line {
				width: 2upx;
				height: 28upx;
				background: #E5E5E5;
			}
			.btn {
				border: none;
				background: transparent;
				font-size: 28upx;
				font-weight: 400;
				color: #010101;
				text-align: left;
				line-height: unset;
				padding: 0;
				margin: 0;
				&::after {
					border: none;
					background: transparent;
					color: #010101;
					display: inline;
					text-align: left;
				}
			}
		}
	}
}
</style>
